<template>
	<view>
		<view class="card-view" :class="{'card-active': item.preStatus == '20'}">
			<view class="name-text">{{item.projectName}}</view>
			<view class="on-view">
				<!-- <view class="on-tag" :class="{'on-tag-active': item.preStatus == '20'}">
					{{item.preStatus == '10' ? '存续中' : '已到期'}}</view> -->
				<view>协议编号: {{item.agreementNumber}}</view>
			</view>
			
			<view class="card-content">
				<view v-if="item.preStatus == '20'" class="division" style="margin-bottom: 30upx;"></view>
				<view class="number-view">
					<view class="number-item">
						<view class="number-text">
							<view>{{item.earningsRate}}</view>
							<view class="unit-text">%</view>
						</view>
						<view class="number-desc">约定回报(年化）</view>
					</view>
					<view class="number-item">
						<view class="number-text">{{item.subscriptionAmount}}</view>
						<view class="number-desc">出资金额(万元)</view>
					</view>
					<view class="number-item">
						<view class="number-text" style="color: #2C1101;">{{item.restrictName}}</view>
						<view class="number-desc">期限(月)</view>
					</view>
				</view>
				<view class="division"></view>
				<view class="options-view">
					<view class="time-view">生效日期：{{dateFormat(item.completeTimes, 'YYYY.MM.DD')}}</view>
					<navigator
						:url="`/pagesMine/transactionDetail/transactionDetail?projectType=1&userProjectId=${item.userProjectId}`"
						hover-class="none" class="button-view">
						<view>查看详情</view>
						<uni-icons type="right" size="22upx" color="#FFFFFF"></uni-icons>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TransactionProject",
		props: {
			item: Object
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped lang="scss">
	.card-view {
		width: 707rpx;
		padding: 22upx;
		padding-bottom: 18upx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin: 0 auto;
		margin-top: 18upx;

		.name-text {
			width: 100%;
			@extend .text-dot;
			font-size: 33rpx;
			font-weight: 500;
			color: #2C1101;
		}

		.on-view {
			width: 100%;
			@extend .row-start;
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #69442E;
			margin-top: 12upx;

			.on-tag {
				padding: 4upx 13upx;
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				background: linear-gradient(270deg, #FF5B4E 0%, #FF2615 100%);
				border-radius: 4rpx;
				margin-right: 14upx;
			}

			.on-tag-active {
				background: linear-gradient(270deg, #7F504D 0%, #2C1101 100%);
			}
		}

		.card-content {
			width: 100%;
			padding: 0 22upx;
			position: relative;
			padding-top: 16upx;
			margin-top: 25upx;

			// &:before {
			// 	content: "";
			// 	width: 100%;
			// 	height: 114rpx;
			// 	background: linear-gradient(180deg, #FFF6F4 0%, #FFFFFF 100%);
			// 	border-radius: 7rpx;
			// 	position: absolute;
			// 	left: 0;
			// 	top: 0;
			// 	z-index: 0;
			// }

			.number-view {
				width: 100%;
				@extend .row-between;
				position: relative;
				z-index: 1;

				.number-item {
					font-size: 22rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #69442E;

					.number-text {
						@extend .row-start;
						align-items: baseline;
						font-size: 40rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #FF442F;

						.unit-text {
							font-size: 22rpx;
						}
					}
				}
			}


			.division {
				width: 100%;
				height: 1px;
				background: #F7E8E4;
				position: relative;
				z-index: 1;
				margin-top: 30upx;
			}

			.options-view {
				width: 100%;
				position: relative;
				z-index: 1;
				@extend .row-between;
				margin-top: 14upx;

				.time-view {
					font-size: 24rpx;
					font-weight: 400;
					color: #69442E;
				}

				.button-view {
					@extend .row;
					width: 139rpx;
					height: 47rpx;
					background: #FF2615;
					border-radius: 24rpx;
					font-size: 22rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}

	}

	.card-active {
		$color: #B8ACA3;

		.name-text,
		.on-view {
			color: $color;
		}

		.card-content {
			padding-top: 0upx;
			margin-top: 0upx;
			.number-view {
				.number-item{
					.number-text {
						color: $color;
					}
				}

				.number-desc {
					color: $color;
				}
			}

			.division {
				background: #F7E8E4;
			}
		}
	}
</style>